<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加/修改页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="add">
            <div class="header">
                <span>{{(action == 'Add'?'添加':'修改')}}商品信息</span>
            </div>
            <div class="main" style="padding: 0 15px;">
                <!-- 配置属性, 目前仅支持 单主表 多子表 结构 -->
                <div id="form"
                    :data-options="JSON.stringify({'tableName':'article_info','formName':'dataForm' ,'primaryKey':'Article_SerialNumber'})">
                    <!-- 子表 -->
                    <div
                        :data-options="JSON.stringify({'tableName':'article_specifications','formName':'childDataForm', 'parentTableName':'article_info'})">
                    </div>
                    <div
                        :data-options="JSON.stringify({'tableName':'article_picture','formName':'article_pictures', 'parentTableName':'article_info'})">
                    </div>
                </div>
                <div class="table_titel">
                    <div class="titel">商品信息</div>
                </div>
                <el-form :model="dataForm" ref="form" :inline-message="true" style="width: 100%">
                    <el-descriptions :column="2" size="large" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">商品名称</div>
                            </template>
                            <el-form-item prop="Article_Name"
                                :rules="[{ required: true, message: '请输入商品名称', trigger: 'blur' }]">
                                <el-input v-model.trim="dataForm.Article_Name" placeholder="请输入商品名称"
                                    clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">商品图片</div>
                            </template>
                            <el-form-item prop="Picture_URL">
                                <yl-upload v-model="dataForm.Picture_URL"></yl-upload>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">尺寸</div>
                            </template>
                            <el-form-item prop="Size" :rules="[{ required: true, message: '请输入尺寸', trigger: 'blur' }]">
                                <el-input v-model.trim="dataForm.Size" placeholder="请输入尺寸" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">吊牌价</div>
                            </template>
                            <el-form-item prop="Unit_Price"
                                :rules="[{ required: true, message: '请输入吊牌价', trigger: 'blur' }]">
                                <el-input v-model.trim="dataForm.Unit_Price" placeholder="请输入吊牌价" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">质量</div>
                            </template>
                            <el-form-item prop="Weight"
                                :rules="[{ required: true, message: '请输入质量', trigger: 'blur' }]">
                                <el-input v-model.trim="dataForm.Weight" placeholder="请输入质量" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">质量单位</div>
                            </template>
                            <el-form-item prop="Weight_Unit"
                                :rules="[{ required: true, message: '请输入质量单位', trigger: 'blur' }]">
                                <el-input v-model.trim="dataForm.Weight_Unit" placeholder="请输入质量单位"
                                    clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">商品品牌</div>
                            </template>
                            <el-form-item prop="Brand_SerialNumber"
                                :rules="[{ required: true, message: '请选择商品品牌', trigger: 'change' }]">
                                <el-select v-model.trim="dataForm.Brand_SerialNumber" placeholder="请选择商品品牌"
                                    style="width: 100%;" clearable filterable>
                                    <el-option v-for="(item,index) in article_brand" :key="index"
                                        :label="item.Brand_Name" :value="item.Brand_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">商品类型</div>
                            </template>
                            <el-form-item prop="Article_Type_SerialNumber"
                                :rules="[{ required: true, message: '请选择商品类型', trigger: 'change' }]">
                                <el-select v-model.trim="dataForm.Article_Type_SerialNumber" placeholder="请选择商品类型"
                                    style="width: 100%;" clearable filterable>
                                    <el-option v-for="(item,index) in article_type" :key="index"
                                        :label="item.Article_Type" :value="item.Article_Type_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">商品系列</div>
                            </template>
                            <el-form-item prop="Series_SerialNumber"
                                :rules="[{ required: true, message: '请选择商品系列', trigger: 'change' }]">
                                <el-select v-model.trim="dataForm.Series_SerialNumber" placeholder="请选择商品系列"
                                    style="width: 100%;" clearable filterable>
                                    <el-option v-for="(item,index) in article_series" :key="index"
                                        :label="item.Series_Name" :value="item.Series_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">商品类别</div>
                            </template>
                            <el-form-item prop="Category_SerialNumber"
                                :rules="[{ required: true, message: '请选择商品类别', trigger: 'change' }]">
                                <el-select v-model.trim="dataForm.Category_SerialNumber" placeholder="请选择商品类别"
                                    style="width: 100%;" clearable filterable>
                                    <el-option v-for="(item,index) in article_category" :key="index"
                                        :label="item.Category_Name" :value="item.Category_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">商品款型</div>
                            </template>
                            <el-form-item prop="Item_SerialNumber"
                                :rules="[{ required: true, message: '请选择商品款型', trigger: 'change' }]">
                                <el-select v-model.trim="dataForm.Item_SerialNumber" placeholder="请选择商品款型"
                                    style="width: 100%;" clearable filterable>
                                    <el-option v-for="(item,index) in article_item" :key="index" :label="item.Item_Name"
                                        :value="item.Item_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form>
                <div class="table_titel">
                    <div class="titel">商品规格</div>
                    <div class="operation">
                        <el-button type="primary" size="small" @click="handleAdd('childDataForm')">新增</el-button>
                        <el-button type="danger" size="small" @click="handleRemove('childDataForm')">删除</el-button>
                    </div>
                </div>
                <el-form :model="{childDataForm:childDataForm.filter(i=>i.Row_Status != '1')}" ref="childForm"
                    :inline-message="true" style="width: 100%">
                    <el-descriptions :column="2" size="large" border
                        v-for="(item,index) in childDataForm.filter(i=>i.Row_Status != '1')" :key="index">
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">规格名称</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Specifications_Name`"
                                :rules="[{ required: true, message: '请输入规格名称', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Specifications_Name" placeholder="请输入规格名称"
                                    clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">规格封面</div>
                            </template>
                            <el-form-item prop="Picture_URL">
                                <yl-upload v-model="item.Picture_URL"></yl-upload>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">规格吊牌价</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Unit_Price`"
                                :rules="[{ required: true, message: '请输入规格吊牌价', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Unit_Price" placeholder="请输入规格吊牌价" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">包装数量</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Package_Quantity`"
                                :rules="[{ required: true, message: '请输入包装数量', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Package_Quantity" placeholder="请输入包装数量"
                                    clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">质量</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Weight`"
                                :rules="[{ required: true, message: '请输入质量', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Weight" placeholder="请输入质量" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">质量单位</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Weight_Unit`"
                                :rules="[{ required: true, message: '请输入质量单位', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Weight_Unit" placeholder="请输入质量单位" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form>
                <div class="table_titel">
                    <div class="titel">商品图片</div>
                    <div class="operation">
                        <el-button type="primary" size="small" @click="handleAdd('article_pictures')">新增</el-button>
                        <el-button type="danger" size="small" @click="handleRemove('article_pictures')">删除</el-button>
                    </div>
                </div>
                <el-form :model="{article_pictures:article_pictures.filter(i=>i.Row_Status != '1')}" ref="childForm"
                    :inline-message="true" style="width: 100%">
                    <el-descriptions :column="2" size="large" border
                        v-for="(item,index) in article_pictures.filter(i=>i.Row_Status != '1')" :key="index">
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">图片类型 0:轮播图 1:详情图</div>
                            </template>
                            <el-form-item :prop="`article_pictures.${index}.Picture_Type`"
                                :rules="[{ required: true, message: '请输入图片类型', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Picture_Type" placeholder="请输入图片类型" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">图片链接</div>
                            </template>
                            <el-form-item prop="Picture_URL">
                                <yl-upload v-model="item.Picture_URL"></yl-upload>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">图片排序</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Picture_Order`"
                                :rules="[{ required: true, message: '请输入图片排序', trigger: 'blur' }]">
                                <el-input v-model.trim="item.Picture_Order" placeholder="请输入图片排序" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>
            </div>
            <div class="footer">
                <el-button size="medium" @click="handleBack">返回</el-button>
                <el-button v-if="type=='0'" size="medium" type="primary" plain @click="handleSubmit"
                    :loading="loading">提交</el-button>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/add.js"></script>
</body>

</html>